<template>
  <div class="pageBox">
    <div class="top">
      <span>应用列表</span>
      <div class="topSearch">
        <a-radio-group :value="size" @change="handleSizeChange">
          <a-radio-button value="large">全部</a-radio-button>
          <a-radio-button value="1">已上架</a-radio-button>
          <a-radio-button value="2">已下架</a-radio-button>
        </a-radio-group>
        <a-input-search
          placeholder="应用名称"
          style="width: 240px"
          @search="onSearch"
          :enterButton=true
        />
      </div>
    </div>
    
    <div type="primary" @click="showModal" class="addApplication" v-if="listButton.addition">+ 添加</div>
    <div class="lists">
      <a-list
        itemLayout="horizontal"
        :dataSource="listDate"
      >
        <a-list-item slot="renderItem" slot-scope="item, index" >
          <div class="lists_lf">
            <img :src="item.icon" alt="" class="lists_img">
            <div class="lists_caption">
              <h5>{{item.name}}</h5>
              <p>{{item.description}}</p>
            </div>
            <div class="lists_type">
              <p>类型</p>
              <p>{{item.type}}</p>
            </div>
            <div class="lists_status">
              <p>类型</p>
              <p><span class="lists_await"></span>{{item.status}}</p>
            </div>
            <div class="lists_time">
              <p>上线时间</p>
              <p>{{item.start_date}}</p>
            </div>
            <div class="lists_compile" >
              <span @click="compile(item.id)">{{listButton.editor}}</span> |
              <span @click="showConfirm(item.id)" >{{listButton.cancel}}</span>
            </div>
          </div>

        </a-list-item>
      </a-list>
    </div>
    <div class="paging">
      <a-locale-provider :locale="locale">
        <a-pagination showQuickJumper  :defaultCurrent="1" :defaultPageSize="5" :total="branches"   @change="onChange"  />
      </a-locale-provider>
    </div>
    <a-modal
      :title="modalData.title"
      destroyOnClose
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      width="520px"
      okText="确定"
      cancelText="取消"
    >
      <div class="drop-down">
        <div class="drop-down-lf">
          应用类型：<a-select :defaultValue="modalData.modalType=='' ? '请选择':modalData.modalType" style="width: 120px" @change="handleChange">
          <a-select-option value="1">游戏</a-select-option>
          <a-select-option value="2">应用</a-select-option>
        </a-select>
        </div>
        <div class="drop-down-rg">
          当前状态：<a-select :defaultValue="modalData.modalStatus==''?'请选择':modalData.modalStatus" style="width: 120px" @change="current">
          <a-select-option value="1">已下架</a-select-option>
          <a-select-option value="2">已上架</a-select-option>
        </a-select>
        </div>
      </div>
      <div class="designation">
        应用名称：<a-input class="designationIpt" v-model="modalData.modalName" placeholder="请输入"/>
      </div>
      <div class="connect">
        连接：<a-input class="connectIpt" v-model="modalData.modalUrl" placeholder="请输入"/>
      </div>
      <div class="Tenant">
        商户名：<a-input class="TenantIpt" v-model="modalData.modalTenant" placeholder="请输入"/>
      </div>
      <div class="time1">
        上架时间：<a-date-picker  @change="onChanges" :defaultValue="moment(modalData.modalTime1)" v-if="modalData.modalTime1"/>
                  <a-date-picker  @change="onChanges"  v-else/>
      </div>
      <div class="time1">
        上架结束：<a-date-picker  @change="onChanges2" :defaultValue="moment(modalData.modalTime2)"  v-if="modalData.modalTime2"/>
                  <a-date-picker  @change="onChanges2" v-else/>
      </div>
      <div class="connect">
        图标：<a-upload action="" :defaultFileList="defaultFileList" :beforeUpload="beforeUpload">
        <a-button>
          <a-icon type="upload"/>
          上传文件
        </a-button>
      </a-upload>
        <p>支持扩展名：.jpg .png (规格：640x200)...</p>
      </div>
      <div class="connect">
        描述：<a-textarea class="describe"  v-model="modalData.modalDescribe" placeholder="请输入至少五个字符" :autosize="{ minRows: 2, maxRows: 6 }"/>
      </div>
    </a-modal> 
  </div>
</template>
<script>
  import moment from 'moment';
  import zhCN from 'ant-design-vue/lib/locale-provider/zh_CN';
  export default {
    data() {
      return {
        locale: zhCN,//分页改为中文
        visible: false,
        defaultFileList: [],//图片数据
        modalData:{
          title:"添加应用",
          modalType:"",//应用类型
          modalStatus:"",//当前状态
          modalImg:"",//图片数据
          modalName:"",//应用名称
          modalUrl:"",//连接
          modalDescribe:"",//描述
          modalId:"",//id
          modalTime1:"",//上架时间
          modalTenant:"",//商户名
          modalTime2:""//上架结束时间
        },//模态框数据
        size: 'large',//顶部三个button大小设置
        listDate:[],//列表数据
        branches:null,//分页总条数
        listGets:{
          limit:5,
          pageSize:1,
          status:"",
          name:""
        },//默认请求数据
        listAlone:"",
        listButton:{
          addition:"",
          editor:"",
          cancel:""
        }//按钮数据
      }
    },
    methods: {
      moment,
      onChanges(date, dateString) {
        this.modalData.modalTime1=dateString.replace(/\-/g, "/");
      },
      onChanges2(date, dateString){
        this.modalData.modalTime2=dateString.replace(/\-/g, "/");
      },
      showModal() {
        this.modalData.title="添加应用";
        this.modalData.modalId="";
        this.modalData.modalType="";
        this.modalData.modalStatus="";
        this.modalData.modalName="";
        this.modalData.modalUrl="";
        this.modalData.modalDescribe="";
        this.modalData.modalImg="";
        this.modalData.modalTenant="";
        this.modalData.modalTime1="";
        this.modalData.modalTime2="";
        this.visible = true;
      },//点击显示模态框
      handleOk(e) {
        if(this.modalData.title=="添加应用"){
          if(this.modalData.modalType==""){
            this.$message.warning("请选择应用类型!");
          }else if(this.modalData.modalStatus==""){
            this.$message.warning("请选择当前状态!");
          }else if(this.modalData.modalName==""){
            this.$message.warning("应用名称不能为空!");
          }else if(this.modalData.modalUrl==""){
            this.$message.warning("链接不能为空!");
          }else if(this.modalData.modalTenant==""){
            this.$message.warning("商户名不能为空!");
          }else if(this.modalData.modalTime1==""){
            this.$message.warning("上架时间不能为空!");
          }else if(this.modalData.modalTime2==""){
            this.$message.warning("上架结束时间不能为空!");
          }else if(this.modalData.modalImg==""){
            this.$message.warning("请传图标!");
          }else if(this.modalData.modalDescribe==""){
            this.$message.warning("描述不能为空!");
          }else{
          let formdata = new FormData();
          formdata.append("file",this.modalData.modalImg);
          formdata.append("name",this.modalData.modalName);
          formdata.append("type",this.modalData.modalType);
          formdata.append("status",this.modalData.modalStatus);
          formdata.append("description",this.modalData.modalDescribe);
          formdata.append("out_url",this.modalData.modalUrl);
          formdata.append("merchant_name","1");
          formdata.append("start_date",this.modalData.modalTime1);
          formdata.append("end_date",this.modalData.modalTime2);
          this.$ajax.post("/kmd-field-web/am/insertApplication",formdata,{
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }).then((res)=>{
            if(res.data.statusCode==200){
              this.$message.success('操作成功',2);
              this.modalData.modalName="",
                this.modalData.modalType="",
                this.modalData.modalStatus="",
                this.modalData.modalDescribe="",
                this.modalData.modalUrl=""
            }
            if(res.data.statusCode==500){
              this.$message.error('操作失败',2);
            }
          })
          }
        }
        if(this.modalData.title=="编辑应用"){
          if(this.modalData.modalType=="应用"){
            this.modalData.modalType=2
          }
          if(this.modalData.modalType=="游戏"){
            this.modalData.modalType=1
          }
          if(this.modalData.modalStatus=="已下架"){
            this.modalData.modalStatus=1
          }
          if(this.modalData.modalStatus=="已上架"){
            this.modalData.modalStatus=2
          }
          let formdata = new FormData();
          if(this.modalData.modalImg!==""){
            formdata.append("file",this.modalData.modalImg);
          }
          formdata.append("id",this.modalData.modalId);
          formdata.append("name",this.modalData.modalName);
          formdata.append("type",this.modalData.modalType);
          formdata.append("status",this.modalData.modalStatus);
          formdata.append("description",this.modalData.modalDescribe);
          formdata.append("out_url",this.modalData.modalUrl);
          formdata.append("merchant_name",this.modalData.modalTenant);
          formdata.append("start_date",this.modalData.modalTime1);
          formdata.append("end_date",this.modalData.modalTime2);
          this.$ajax.post("/kmd-field-web/am/editApplication",formdata,{
            headers: {
              'Content-Type': 'multipart/form-data'
            }
          }).then((res)=>{
            if(res.data.statusCode==200){
              this.$message.success('编辑成功',2);
              this.modalData.modalName="",
                this.modalData.modalType="",
                this.modalData.modalStatus="",
                this.modalData.modalDescribe="",
                this.modalData.modalUrl="",
                this.listGet()
            }
            if(res.data.statusCode==500){
              this.$message.error('编辑失败',2);
            }
          })
        }
      },//添加模态框点击确定发送请求，并清空用户输入的数据
      handleCancel(e) {
        this.visible = false
      },//模态框取消事件框
      handleChange(value) {
        this.modalData.modalType=value
      },//应用类型下拉框
      current(value) {
        this.modalData.modalStatus=value
      },//当前状态下拉框
      beforeUpload(file,Promise) {
        this.fileList = [this.fileList, file];
        this.modalData.modalImg=file;
        return false;
      },//图片的数值
      onSearch(value){
        this.listGets.name=value;
        this.listGets.pageSize=1;
        this.listGet()
      },//顶部搜索框
      handleSizeChange(e){
        this.size = e.target.value;
        if(e.target.value==="large"){
          e.target.value=""
        }
        this.listGets.status=e.target.value;
        this.listGets.pageSize=1;
        this.listGet()
      },//顶部三个button点击获取值
      onChange(pageNumber) {
        this.listGets.pageSize=pageNumber;
        this.listGet()
      },// 分页跳转
      listGet(){
        this.$ajax.get("/kmd-field-web/am/applicationPage",{params: this.listGets}).then((res)=>{
          this.listDate=res.data.records;
          this.branches=res.data.total;
        })
      },//列表数据
      compile(id){
        this.$ajax.get("/kmd-field-web/am/queryApplicationById",{params:{"id":id}}).then((res)=>{
          console.log(res)
          if(res.data.statusCode===200){
            this.modalData.title="编辑应用";
            this.modalData.modalId=id;
            this.modalData.modalType=res.data.result.type;
            this.modalData.modalStatus=res.data.result.status;
            this.modalData.modalName=res.data.result.name;
            this.modalData.modalUrl=res.data.result.out_url;
            this.modalData.modalDescribe=res.data.result.description;
            this.modalData.modalImg="";
            this.modalData.modalTenant=res.data.result.merchant_name;
            this.modalData.modalTime1=res.data.result.start_date;
            this.modalData.modalTime2=res.data.result.end_date;
          }
          this.visible=true;
        })
      },//编辑数据
      deletes(id){
        this.$ajax.get("/kmd-field-web/am/deleteApplication",{params:{"id":id}}).then((res)=>{
          if(res.data.statusCode==200){
            this.$message.success('删除成功',2);
            this.listGet()
          }
          if(res.data.statusCode==500){
            this.$message.error('删除失败',2);
          }
        })
      },//删除数据
      showConfirm(id) {
        let _this=this
        this.$confirm({
          title: '警告',
          content: '你确定要删除吗',
          onOk() {
            _this.$ajax.get("/kmd-field-web/am/deleteApplication",{params:{"id":id}}).then((res)=>{
              if(res.data.statusCode==200){
                _this.$message.success('删除成功',2);
                _this.listGet()
              }
              if(res.data.statusCode==500){
                _this.$message.error('删除失败',2);
              }
            })

          },
          onCancel() {

          },
        });
      },
    },
    created(){
      let titleName=sessionStorage.getItem("stairH1");
        this.$ajax.get("/kmd-field-web/admin/queryBtn",{params:{"title":titleName.trim()}}).then(res=>{
          for(var i=0;i<res.data.list.length;i++) {
            if (res.data.list[i].title == "增加") {
              this.listButton.addition = res.data.list[i].title
            }
            if (res.data.list[i].title == "编辑") {
              this.listButton.editor = res.data.list[i].title
            }
            if (res.data.list[i].title == "删除") {
              this.listButton.cancel = res.data.list[i].title
            }
          }
      });
      this.listGet()
    }
  }
</script>

<style scoped lang="less">
.top{
  display: flex;
  justify-content: space-between;
  align-items: center;
  span{
    font-size: 16px;
    font-weight: 600;
  }
}
  .addApplication {
    width: 100%;
    height: 32px;
    border: 1px dashed #e8e8e8;
    text-align: center;
    line-height: 32px;
    border-radius: 8px;
    margin-top: 40px;
    &:hover{
      cursor: pointer;
    }
  }
  .drop-down {
    display: flex;
    .drop-down-lf {
      flex: 1;
    }
    .drop-down-lf {
      flex: 1;
    }
  }
  .designation {
    margin-top: 15px;
    .designationIpt {
      width: 238px;
    }
  }
  .Tenant{
    margin-top: 15px;
    padding-left: 11px;
    .TenantIpt{
      width: 320px;
    }
  }
  .time1{
    margin-top: 15px;
  }
  .connect {
    margin-top: 15px;
    padding-left: 27px;
    .connectIpt {
      width: 320px;
    }
    p {
      margin-left: 43px;
      color: rgba(0, 0, 0, 0.5)
    }
    .describe {
      width: 401px;
      height: 82px;
    }
  }
  // .topSearch{
  //   float: right;
  //   height: 40px;
  // }
  .lists{
    margin-top: 40px;
    width: 100%;
    .lists_lf{
      display: flex;
      .lists_img{
        width: 48px;
        height: 48px;
        background: red;
      }
      .lists_caption{
        width: 500px;
        margin-left: 26px;
      }
      .lists_type{
        flex: 1;
        line-height: 15px;
        margin-top: 6px;
        margin-left: 90px;
      }
      .lists_status{
        flex: 1;
        line-height: 15px;
        margin-top: 6px;
        margin-left: 90px;
        .lists_await{
          display: inline-block;
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: #BFBFBF;
          margin-bottom: 2px;
          margin-right: 5px;
        }

      }
      .lists_time{
        line-height: 15px;
        margin-top: 6px;
        margin-left: 90px;
      }
      .lists_compile{
        flex: 1;
        margin-top: 20px;
        margin-left: 120px;
        width: 300px;
        color: blue;
        span{
          &:hover{
            text-decoration: underline;
            cursor: pointer;
          }
        }
      }

    }

  }
  .paging{
    float: right;
    margin-top: 23px;
  }
  .pageBox{
    overflow: hidden
  }
</style>
